<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>支付成功</title>
    <style>
      /* 全局样式 - 严格遵循设计规范 */
      html,
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          sans-serif;
        background-color: #faf9f5;
        color: #333333;
        font-size: 14px;
        line-height: 1.4;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      /* 页面容器 */
      .container {
        max-width: 480px;
        margin: 0 auto;
        background-color: #f1f2f4;
        min-height: 100%;
        position: relative;
        overflow-x: hidden;
      }

      /* 内容区域 */
      .contentArea {
        padding: 10px;
        padding-bottom: 40px;
      }

      /* ===== 主卡片容器 ===== */
      .mainCard {
        background-color: #ffffff;
        border-radius: 8px;
        overflow: hidden;
      }

      /* ===== 顶部区域 ===== */
      .headerSection {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .headerLeft {
        flex: 1;
      }

      .headerVenue {
        font-size: 16px;
        color: #333333;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .venueIcon {
        width: 20px;
        height: 20px;
        border: 1px solid #d0d0d0;
        border-radius: 3px;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        color: #999999;
        flex-shrink: 0;
      }

      .headerVenue::after {
        content: '›';
        color: #999999;
      }

      .headerRight {
        text-align: right;
        flex-shrink: 0;
        margin-left: 12px;
      }

      .successBadge {
        display: inline-block;
        padding: 2px 8px;
        background-color: #333333;
        color: #ffffff;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 600;
      }

      /* ===== 球局信息区 ===== */
      .gameSection {
        padding: 0 16px 16px;
        display: flex;
        gap: 12px;
        position: relative;
      }

      .gameImage {
        width: 80px;
        height: 80px;
        background-color: #e8e8e8;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
      }

      /* 占位符十字线 */
      .gameImage::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 1px;
        background: linear-gradient(to right, transparent, #ccc, transparent);
        z-index: 1;
      }

      .gameImage::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 70%;
        background: linear-gradient(to bottom, transparent, #ccc, transparent);
        z-index: 1;
      }

      .gameInfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

      .gameName {
        font-size: 15px;
        color: #000;
        margin-bottom: 8px;
      }

      .gameDetail {
        font-size: 12px;
        color: #666666;
        line-height: 1.6;
      }

      /* 价格标签 - 右上角 */
      .priceTag {
        position: absolute;
        top: 16px;
        right: 16px;
        text-align: right;
      }

      .priceTagValue {
        font-size: 15px;
        font-weight: 700;
        color: #000;
      }

      /* ===== 实付款区 ===== */
      .paymentSection {
        padding: 0 16px;
      }

      .paymentRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        font-size: 12px;
      }

      .paymentLabel {
        color: #999999;
      }

      .paymentValue {
        color: #000;
        font-size: 18px;
        font-weight: 600;
      }

      /* ===== 订单详情区 ===== */
      .orderDetailSection {
        padding: 0 16px 6px;
      }

      .detailRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        font-size: 12px;
      }

      .detailRow:last-child {
        border-bottom: none;
      }

      .detailLabel {
        color: #999999;
      }

      .detailValue {
        color: #333333;
        font-weight: 500;
        flex: 1;
        text-align: right;
        margin-left: 12px;
        word-break: break-all;
      }

      /* 分隔线 */
      .separator {
        color: #d0d0d0;
        margin: 0 4px;
        transform: translateY(-1px);
      }

      /* 复制链接 */
      .copyLink {
        color: #666666;
        background: none;
        border: none;
        padding: 0;
        font-size: 12px;
        cursor: pointer;
        font-weight: 500;
      }

      .copyLink:hover {
        text-decoration: underline;
        color: #333333;
      }

      .orderIdWrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      /* ===== 顶部导航栏 ===== */
      .topNav {
        background-color: #ffffff;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0;
      }

      .topNav-left {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: #333333;
      }

      .topNav-left:hover {
        opacity: 0.7;
      }

      .topNav-title {
        flex: 1;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }

    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航栏 -->
      <div class="topNav">
        <div class="topNav-left">‹</div>
        <div class="topNav-title">完成</div>
      </div>

      <!-- 内容区域 -->
      <div class="contentArea">
        <!-- 主卡片 - 所有内容放在一个卡片中 -->
        <div class="mainCard">
          <!-- 顶部区域 -->
          <div class="headerSection">
            <div class="headerLeft">
              <div class="headerVenue">
                <div class="venueIcon">球馆</div>
                <span>众乐谷丰路足球训练基地</span>
              </div>
            </div>
            <div class="headerRight">
              <div class="successBadge">完成</div>
            </div>
          </div>

          <!-- 球局信息 -->
          <div class="gameSection">
            <div class="gameImage"></div>
            <div class="gameInfo">
              <div class="gameName">蓝天霸主局</div>
              <div class="gameDetail">
                <div>球局时间：2025-10-29 14:00</div>
                <div>球馆：众乐谷丰路足球训练基地</div>
              </div>
            </div>
            <div class="priceTag">
              <div class="priceTagValue">¥0.02</div>
            </div>
          </div>

          <!-- 实付款 -->
          <div class="paymentSection">
            <div class="paymentRow">
              <span class="paymentLabel">实付款</span>
              <span class="paymentValue">¥0.02</span>
            </div>
          </div>

          <!-- 订单详情 -->
          <div class="orderDetailSection">
            <div class="detailRow">
              <span class="detailLabel">订单编号</span>
              <div class="orderIdWrapper">
                <span class="detailValue">20251029135605124288797343</span>
                <span class="separator">|</span>
                <button class="copyLink">复制</button>
              </div>
            </div>
            <div class="detailRow">
              <span class="detailLabel">支付方式</span>
              <span class="detailValue">微信支付</span>
            </div>
            <div class="detailRow">
              <span class="detailLabel">下单时间</span>
              <span class="detailValue">2025-10-29 13:56:05</span>
            </div>
            <div class="detailRow">
              <span class="detailLabel">支付时间</span>
              <span class="detailValue">2025-10-29 13:56:05</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      // 返回按钮
      const backButton = document.querySelector('.topNav-left')
      backButton.addEventListener('click', function () {
        window.history.back()
      })

      // 复制订单号功能
      const copyLink = document.querySelector('.copyLink')
      const orderValue = document.querySelector('.orderIdWrapper .detailValue')

      copyLink.addEventListener('click', function (e) {
        e.preventDefault()
        const text = orderValue.textContent.trim()

        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard
            .writeText(text)
            .then(() => {
              const originalText = copyLink.textContent
              copyLink.textContent = '已复制'
              setTimeout(() => {
                copyLink.textContent = originalText
              }, 2000)
            })
            .catch((err) => {
              console.error('复制失败:', err)
            })
        } else {
          // 降级方案
          const textarea = document.createElement('textarea')
          textarea.value = text
          document.body.appendChild(textarea)
          textarea.select()
          try {
            document.execCommand('copy')
            const originalText = copyLink.textContent
            copyLink.textContent = '已复制'
            setTimeout(() => {
              copyLink.textContent = originalText
            }, 2000)
          } catch (err) {
            console.error('复制失败:', err)
          }
          document.body.removeChild(textarea)
        }
      })
    </script>
  </body>
</html>
